<script>
import {
  deleteGoodsView,
  deleteMallView,
  getBrowseRecord,
  getMallView
} from '@/api/mallApi/advert'

export default {
  name: 'RecordPage',
  data() {
    return {
      activeName: 'first',
      defaultActive: '',
      goodsList: [],
      currentPage: 1, // 分页
      total: 0,
      storeList: [],
      pageSize: 10,
      loading: false
    }
  },
  computed: {},

  // 监听 storeList，如果storeList.length为 0 重新获取数据
  watch: {
    storeList: {
      handler(val) {
        if (val.length === 0 && this.currentPage !== 1) {
          this.currentPage -= 1
          this.getListData()
        }
      },
      deep: true
    },
    goodsList: {
      handler(val) {
        if (val.length === 0 && this.currentPage !== 1) {
          this.currentPage -= 1
          this.getListData()
        }
      },
      deep: true
    }
  },

  created() {
    this.activeName = localStorage.getItem('activeName')
    this.getListData()
  },
  methods: {
    goDetail(query) {
      // 记录跳转之前的 activeName
      localStorage.setItem('activeName', this.activeName)
      this.$router.push({ path: `/mall/product?id=${query}` })
    },
    getListData() {
      this.loading = true
      if (this.activeName === 'first') {
        this.pageSize = 10
      }
      if (this.activeName === 'second') {
        this.pageSize = 2
      }
      const params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }
      if (this.activeName === 'first') {
        getBrowseRecord(params)
          .then((res) => {
            if (res.code === '00000') {
              this.goodsList = res.data.rows
              this.total = res.data.totalRows
              this.loading = false
            }
          })
          .catch((err) => {
            this.$message.error(err)
            this.loading = false
          })
      }
      if (this.activeName === 'second') {
        getMallView(params)
          .then((res) => {
            if (res.code === '00000') {
              this.storeList = res.data.rows
              this.total = res.data.totalRows
              this.loading = false
            }
          })
          .catch((err) => {
            this.$message.error(err)
            this.loading = false
          })
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getListData()
    },
    handleClick(tab) {
      this.activeName = tab.name
      // 储存当前的 activeName
      localStorage.setItem('activeName', this.activeName)
      this.getListData()
    },
    goShopDetail(query) {
      if (query.mallStatus == 2) {
        this.$router.push({
          path: '/mall/storeDetail',
          query
        })
      }
    },
    cancelR(item) {
      deleteGoodsView({ goodsIds: [item.goodsId] }).then((res) => {
        if (res.code === '00000') {
          this.$message.success('取消成功')
          this.getListData()
        }
      })
    },
    cancelMall(item) {
      deleteMallView({ mallCode: item.mallCode, ids: [item.id] }).then(
        (res) => {
          if (res.code === '00000') {
            this.$message.success('取消成功')
            this.getListData()
          }
        }
      )
    }
  }
}
</script>

<template>
  <div class="content">
    <div class="title">
      <p>浏览记录</p>
    </div>
    <div class="contTop">
      <div class="viewContent">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="width: 998px"
        >
          <el-tab-pane label="商品记录" name="first">
            <div class="goodsList">
              <div
                v-for="item in goodsList"
                class="content container"
                style="cursor: pointer"
                :key="item.id"
                :class="item.goodStatus == 1 ? 'disabled_list' : ''"
              >
                <img
                  :src="item.thumb"
                  :style="{ cursor: item.goodStatus == 2 ? 'pointer' : '' }"
                  height="180px"
                  width="180px"
                  @click="goDetail(item.goodsId)"
                  alt=""
                />
                <p @click="goDetail(item.goodsId)" style="margin-top: 20px">
                  {{ item.name }}
                </p>
                <p @click="goDetail(item.goodsId)" style="margin-top: 20px">
                  ¥{{ item.priceCurrent / 100 }}/{{ item.unit }}
                </p>
                <span @click="cancelR(item)">取消记录</span>
              </div>
              <div
                v-for="(item, index) in 5 - (goodsList.length % 5)"
                style="width: 232px"
                :key="index"
              ></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="店铺记录" name="second">
            <div
              v-for="item in storeList"
              class="shopsList container"
              :key="item.shop_id"
              :class="item.mallStatus == 4 ? 'disabled_list' : ''"
            >
              <div class="shopsLeft">
                <div class="shopsTop" @click="goShopDetail(item)">
                  <img :src="item.image" alt="" height="100px"
                       width="100px" />
                  <div class="hardware">
                    <p>{{ item.mallName }}</p>
                  </div>
                </div>
                <label style="margin-right: -80px" @click="cancelMall(item)"
                >取消记录</label
                >
                <p class="praised" v-if="item.mallStatus == 4">店铺已失效</p>
              </div>
              <div class="shopsRight">
                <div
                  v-for="item in item.goodslist"
                  class="shopsContent"
                  :key="item.pro_id"
                >
                  <img
                    :src="item.thumb"
                    alt=""
                    height="152px"
                    width="183px"
                    @click="goDetail(item.id)"
                  />
                  <p>{{ item.name }}</p>
                  <p>¥{{ item.priceCurrent / 100 }}/{{ item.unit }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <div class="paging" v-if="total > 0">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="(!goodsList.length || !storeList) && !loading">
          <img alt="" src="./images/缺省页.png" style="margin-left: 300px" />
          <p style="margin-left: 400px; font-size: 14px; color: #626262">
            暂时没有搜索到您要找的内容！
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  //height: 1041px;

  .contTop {
    margin-left: 10px;
  }
}

.title {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  height: 62px;
  line-height: 62px;
  border-bottom: 1px solid #e9e9e9;
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  color: #3c3c3c;

  p {
    margin-left: 24px;
  }
}

.viewContent {
  width: 1010px;
  border-radius: 4px;

  .disabled_list {
    cursor: no-drop;
    filter: grayscale(100%);
  }

  .container {
    position: relative; /* 设置容器为相对定位 */
    p:nth-child(4) {
      color: red;
      font-size: 15px;
      padding: 0;
      margin: 0 0 0 75px;
      font-weight: 700;
    }

    .images {
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 50%;
      opacity: 0.8;
    }
  }

  .container span {
    display: none; /* 初始状态下不显示文本内容 */
    position: absolute; /* 将文本元素放在容器上面 */
    top: 48%;
    left: 11%; /* 水平居中 */
    padding: 8px; /* 添加一些间距 */
    background-color: #1289ff; /* 设置背景色 */
    color: white; /* 设置文字颜色 */
    border-radius: 4px; /* 添加边框圆角 */
    // display: block;
    width: 139px;
    height: 42px;
    text-align: center;
    opacity: 0.8;
    line-height: 1.5;
    font-size: 20px;
    cursor: pointer;
  }

  .container:hover span {
    display: block; /* 当鼠标悬浮在容器上时显示文本内容 */
  }

  .content {
    width: 1010px;
    height: 100%;
    background: #fff;
  }

  .contop {
    margin-left: 10px;

    input {
      outline: none;
      width: 438px;
      height: 36px;
      border-radius: 4px;
      border: 2.5px solid #e5e5e5;
      background: #fff;
      font-weight: 400;
      font-size: 14px;
      color: #a0a0a0;
      padding-left: 20px;
    }

    button {
      width: 111px;
      height: 36px;
      background: #f0f0f0;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
      color: #3c3c3c;
      border: #e5e5e5;
      cursor: pointer;
    }
  }

  .goodsList {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .content {
      width: 180px;
      height: 290px;
      margin-top: 15px;
      box-shadow: 1px 1px 1px 1px #fbfafa;

      p:nth-child(2) {
        font-weight: 700;
        font-size: 15px;
        color: #2b2b2b;
        overflow: hidden;
        /* 隐藏超出容器大小的部分 */
        white-space: nowrap;
        /* 不换行 */
        text-overflow: ellipsis;
      }

      p:nth-child(3) {
        font-weight: 700;
        font-size: 18px;
        color: #ff6b00;
        padding: 0;
        margin: 0;
      }
    }
  }
}

.el-menu.el-menu--horizontal {
  border-bottom: 1px solid #cccccc !important;
}

.el-menu-item:nth-child(1) {
  font-size: 18px;
}

.el-menu-item:nth-child(2) {
  font-size: 18px;
  margin-left: 20px;
}

.disabled_list {
  cursor: no-drop;
  filter: grayscale(100%);
}

.container {
  position: relative; /* 设置容器为相对定位 */
}

.container label {
  display: none; /* 初始状态下不显示文本内容 */
  position: absolute; /* 将文本元素放在容器上面 */
  top: 0%;
  left: 0%; /* 水平居中 */
  padding: 8px; /* 添加一些间距 */
  background-color: #1289ff; /* 设置背景色 */
  color: white; /* 设置文字颜色 */
  border-radius: 4px; /* 添加边框圆角 */
  // display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  opacity: 0.8;
  line-height: 4.5;
  font-size: 17px;
  cursor: pointer;
}

.container:hover label {
  display: block; /* 当鼠标悬浮在容器上时显示文本内容 */
}

.contop {
  input {
    outline: none;
    width: 438px;
    height: 36px;
    border-radius: 4px;
    border: 2.5px solid #e5e5e5;
    background: #fff;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    color: #a0a0a0;
    padding-left: 20px;
  }

  button {
    width: 111px;
    height: 36px;
    background: #f0f0f0;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #3c3c3c;
    border: #e5e5e5;
    cursor: pointer;
  }
}

.shopsList {
  width: 100%;
  height: 292px;
  //   background: red;
  margin-top: 20px;
  display: flex;

  .shopsRight {
    display: flex;
    justify-content: space-around;
    width: 135%;

    .shopsContent {
      width: 183px;
      height: 250px;
      //   background-color: aquamarine;
      box-shadow: 1px 1px 1px 1px #fbfafa;

      p:nth-child(2) {
        font-weight: 600;
        font-size: 15px;
        color: #2b2b2b;
        overflow: hidden;
        /* 隐藏超出容器大小的部分 */
        white-space: nowrap;
        /* 不换行 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      p:nth-child(3) {
        font-weight: 700;
        font-size: 20px;
        color: #ff6b00;
      }
    }
  }

  .shopsLeft {
    width: 448px;
    height: 100%;
    // background: #0479db;
    .praised {
      margin-top: 130px;
      font-weight: 400;
      font-size: 14px;
      color: #585858;
    }

    .shopsTop {
      display: flex;

      .hardware {
        margin: -5px;

        p:nth-child(1) {
          font-weight: 700;
          font-size: 18px;
          color: #1289ff;
          margin-left: 14px;
        }

        p:nth-child(2) span {
          font-weight: 400;
          font-size: 14px;
          margin-left: 15px;
          color: #585858;
        }
      }
    }
  }
}
</style>
